<template>
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane :label="orgType == 3?'采购订单':'采购入库单列表'" name="receiveList">
        </el-tab-pane>
		<el-tab-pane label="采购退货/空瓶单" name="empties">
		</el-tab-pane>
        <!-- <el-tab-pane label="还货出库单" name="backGood">
		</el-tab-pane> -->
        <el-tab-pane label="配送费用单" name="deliveryFee">
		</el-tab-pane>
        <el-tab-pane label="押金费用单" name="depositFee">
		</el-tab-pane>
        <el-tab-pane :label=" orgType == 3? '已发送的对账申请':'已收到的对账申请'"  name="applyList">
        </el-tab-pane>
        <el-tab-pane label="自动对账结果" name="resultList">
        </el-tab-pane>
    </el-tabs>
    <Suspense>
        <template #default>
            <keep-alive>
                <component :is="activeComponent" />
            </keep-alive>
        </template>
        <template #fallback>
            <el-skeleton :rows="3" />
        </template>
    </Suspense>
</template>

<script>
   import { defineAsyncComponent } from "vue";
   import tool from "@/utils/tool";
   export default {
    name:"accountmanage-supplieraccount",
       components: {
           receiveList: defineAsyncComponent(() => import("./receiveList.vue")),  // 采购入库单列表
           applyList: defineAsyncComponent(() => import("./applyList.vue")), // 已收到的对账申请
           resultList: defineAsyncComponent(() => import("./resultList.vue")), // 自动对账结果
		   empties: defineAsyncComponent(() => import("./empties.vue")), // 采购退货/空瓶单
           backGood: defineAsyncComponent(() => import("./backGood.vue")), // 还货出库单
           deliveryFee: defineAsyncComponent(() => import("./deliveryFee.vue")), // 配送费用单
           depositFee: defineAsyncComponent(() => import("./depositFee.vue")), // 押金费用单
       },
       data() {
           return {
               activeName: "receiveList", // 初始显示的标签页名称应该对应el-tab-pane的name属性
               activeComponent: "receiveList", // 初始显示的组件名称
               orgType: '',
           };
       },
       methods: {
           handleClick(tab, event) {
            this.$nextTick(() => {
               // 处理标签页点击事件
               console.log(tab.props.name); // 输出当前标签页的名称

               this.activeComponent=tab.props.name
            });
           },
       },
       mounted() {
			this.orgType = tool.data.get("USER_INFO").AccountType;
            console.log("orgType",this.orgType);
		},
   }

</script>

<style>
</style>
